<template>
  <div class="cashOutRecord por vh100">
    <div class="record" v-if="recordList.length">
      <van-list v-model="loading"
                class="ul"
                :finished="recordList.length >= total"
                finished-text="没有更多了"
                @load="curr++">
        <div v-for="item in recordList" :key="item.id" class="recordList li flex tac">
          <div class="time flex-2">{{item.apply_time}}</div>
          <div class="status flex-1">
            <div :class="'state' + item.status">{{item.status_msg || item.status}}</div>
          </div>
          <div class="money flex-1">￥{{item.price}}</div>
        </div>
      </van-list>
    </div>
    <div class="noRecord abs-c" v-else>
      <img src="../../../static/images/noRecord.png" alt="" class="img vam">
      <div class="tac no-record-text">您还没有提现记录哦~</div>
    </div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex';
  import { isChannel } from '@/config/config';

  export default {
    computed: {
      ...mapGetters(['userInfo', 'productInfo'])
    },
    data() {
      return {
        recordList: [],
        total: 0,
        curr: 0,
        limits: 15,
        loading: true
      };
    },
    created() {
      if (isChannel && this.productInfo.channel_id !== 23) return this.$router.go(-1);
      this.getCashOutRecord();
    },
    methods: {
      //获取提现记录
      getCashOutRecord() {
        this.curr++;
        this.http.$post('wxcat/api/cash_list', {
          uid: this.userInfo.uid,
          curr: this.curr,
          limits: this.limits
        }).then(res => {
          this.recordList = [...this.recordList, ...res.cash_list] || [];
          this.total = res.total || 0;
          this.loading = false;
        }).catch(this.$err);
      }
    }
  };
</script>

<style lang="less" scoped>
  .cashOutRecord {
    background-color: #f3f3f3;
    .record {
      font-size: 0.94rem;
      background-color: #fff;
      .recordList {
        height: 3.56rem;
        line-height: 3.56rem;
        border-bottom: 1px solid #eee;
        .time {
          color: #777;
        }
        .status {
          text-align: left;
        }
        .money {
          font-size: 1.13rem;
          color: #333;
        }
        .state1 {
          color: #f4920d;
        }
        .state2 {
          color: #999;
        }
        .state3 {
          color: #ff4343;
        }
      }
    }
    .noRecord {
      top: 8.13rem;
      .img {
        width: 12.5rem;
      }
      .no-record-text {
        margin-top: 1.5rem;
        color: #999;
        font-size: 1rem;
        line-height: 1;
      }
    }
  }
</style>
